<template>
  <el-dialog
    v-model="dialogVisible"
    title="上传脚本"
    :width="dailogWidth"
    :before-close="handleClose"
  >
    <el-form
      ref="formRef"
      style="max-width: 600px"
      :model="dataForm"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      v-loading="loading"
    >
      <el-form-item label="版本号" prop="version" label-position="right">
        <el-input style="width: 90%" v-model="dataForm.version" placeholder="请输入版本号" :clearable="true"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark" label-position="right">
        <el-input style="width: 90%" v-model="dataForm.remark" placeholder="请输入备注" :clearable="true"/>
      </el-form-item>
      <el-form-item label="脚本上传" prop="file" label-position="right">
        <el-upload
          v-model:file-list="fileList"
          ref="upload"
          class="upload-demo"
          action=""
          accept=".lua,.tep,.e,.tepe"
          :limit="1"
          :on-change="handleUploadChange"
          :auto-upload="false"
        >
          <template #trigger>
            <el-button type="primary">选择文件</el-button>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer" v-loading="loading">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submitForm">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { fileInfoUpload } from '@/utils/formRequest'
import { addGroupApi } from '@/api/equipmentManagement/massTexting.api'
import useToggle from "@/hooks/useToggle";
import useDailogWidth from "@/hooks/useDailogWidth";
const dailogWidth = useDailogWidth("90%", "35%")
const [loading, , setLoading] = useToggle();
const [dialogVisible, , setDialogVisible] = useToggle();
const emit = defineEmits(["refresh"]);
const dataForm = ref({
  version: "",
  remark: "",
  file: null,
  id: void undefined,
})
const rules = {
  version: [{ required: true, message: '请输入版本号', trigger: 'blur' },],
  file: [{ required: true, message: '请上传脚本', trigger: 'change' },],
}
const handleClose = () => {
  setDialogVisible(false)
}

const handleOpen = (row) => {
  setDialogVisible(true)

  nextTick(() => {
    resetForm()
    nextTick(() => {
      if(row) {
        dataForm.value.version = row.version
        dataForm.value.remark = row.remark
        dataForm.value.id = row.id
      }
    })
  })
}

const fileList = ref([])
const handleUploadChange = async (files, list) => {
  fileList.value = list
  dataForm.value.file = files.raw
  await formRef.value.validate(() => {})
}

const submitForm = async () => {
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      setLoading(true)

      const params = `?version=${dataForm.value.version}&remark=${dataForm.value.remark}&id=${dataForm.value.id}`
      const fileData = new FormData()
      const utf8File = new File([dataForm.value.file], encodeURIComponent(dataForm.value.file.name));
      fileData.append('file', utf8File)

      fileInfoUpload(`/device/script/add${params}`, fileData).then(res => {
        emit("refresh");
        setLoading(false)
        handleClose()
      })
    }
  })
}

const formRef = ref(null)
const resetForm = () => {
  if (!formRef.value) return
  dataForm.value.id = void undefined
  fileList.value = []
  formRef.value.resetFields()
}

defineExpose({
  handleOpen,
})
</script>
